<template>
  <el-row>
    <el-col :span="24">
      <span>添加银行卡</span>
    </el-col>
    <el-col :span="16" :offset="4">
      <el-steps :active="active" align-center>
        <el-step title="验证身份"></el-step>
        <el-step title="添加银行卡"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
    </el-col>
    <el-col :span="24" style="margin-top:25px;">
      <el-form class="el-form-col" :model="model" label-position="left" ref="elForm" label-width="120px">
        <div class="row">
          <template v-if="active == 1">
            <el-col :span="16" :offset="4">
              <el-form-item label="钱包密码：" placeholder="请输入6位钱包密码" prop="walletPsw" :rules="[
               { required: true, message: '请输入钱包密码', trigger: 'blur' },
               { validator: isInteger, message: '请输入整数', trigger: 'blur' },
               { validator: range, isString: true, min: 1, max: 6, message: '请输入6位以内的整数', trigger: 'blur' }
              ]">
                <el-input type="password" v-model="model.walletPsw"></el-input>
              </el-form-item>
            </el-col>
          </template>

          <template v-if="active == 2">

            <el-col :span="16" :offset="4">
              <el-form-item label="银行卡类型:" prop="bankType" :rules="[
              {required: true, message: '请选择开户行!', trigger: 'change'}
            ]">
                <el-select v-model="model.bankType" placeholder="请选择银行">
                  <el-option v-for="item of bankTypeArr" :label="item.text" :value="item.value" :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="16" :offset="4">
              <el-form-item prop="cardNo" label="银行卡号:" placeholder="请输入银行卡号"  :rules="[
              {required: true, min: 16, max: 19, message: '请填写16~19位的数字！', trigger: 'blur'},
              {validator: isInteger, message: '请填写整数数字！', trigger: 'blur'}
            ]">
                <el-input  type="text" v-model="model.cardNo"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16" :offset="4">
              <el-form-item prop="cardName" label="持卡人:"  placeholder="请输入持卡人姓名" :rules="[
              {required: true, message: '请输入持卡人姓名', trigger: 'blur'},
              {max: 10, message: '最多10个汉字（字符）', trigger: 'blur'}
            ]">
                <el-input type="text" v-model="model.cardName"></el-input>
              </el-form-item>
            </el-col>
          </template>

          <template v-if="active ==3">
            <el-col :span="16" :offset="4" class="text-center">
              <el-form-item label-width="0px">
                <p><i class="el-icon-success m--font-success" style="font-size: 80px"></i></p>
                <p>已成功添加银行卡！</p>
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="16" :offset="4">
            <el-button style="width:100%" class="btn-block btn-lg" :loading="loading" type="primary" @click.prevent="submit">{{ active == 3 ? '确定' : '下一步' }}</el-button>
          </el-col>
        </div>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
import {isInteger, selectRequired, range} from '@/utils/validate'
import {dotData, alert} from '@/utils'
import {getWalletBankXiaoer} from '@/utils/selectOptions'
// import {isInteger, selectRequired, range} from 'assets/scripts/base/validator'
export default {
  name: 'addBankCard',
  components: {
  },
  data() {
    return {
      loading: false,
      active: 1,
      bankTypeArr: [], // 银行下拉选项
      model: {
        walletPsw: '', // 钱包密码
        bankType: '', // 银行类型
        cardNo: '',
        cardName: ''
      }
    }
  },
  created() {
    getWalletBankXiaoer().then(data => {
      console.log('333333333', data)
      this.bankTypeArr = data
    })
  },
  computed: {},
  watch: {
  },
  methods: {
    isInteger,
    selectRequired,
    range,
    // selectRequired,
    // 效验 钱包密码：OK之后 再进入第二步 httpGetResponse
    checkPsw() {
      console.log('进入验证密码接口 之前')
      let checkData = {}
      checkData.password = this.model.walletPsw
      this.$ajax.get('/ms-user-wallet/wallet/wallet-password-validation', checkData).then(response => {
        const success = dotData(response, 'success')
        let errorMsg = dotData(response, 'error_message')
        if (success) {
          this.active = 2
        } else {
          alert(errorMsg)
        }
      })
    },
    // 合并下一步 和 确定按钮
    submit() {
      this.$refs.elForm.validate(result => {
        if (!result) {
          return
        }
        if (this.active === 1) {
          this.checkPsw()
        } else if (this.active === 2) {
          this.submitBankForm()
        } else if (this.active === 3) {
          this.$router.push({path: '/ss-fhb/myWallet/bankCardIndex'})
        }
      })
    },
    //  提交 添加银行卡
    submitBankForm() {
      let userDat = {}
      userDat.cardNo = this.model.cardNo
      userDat.bankTypeCode = this.model.bankType // 银行卡id
      userDat.cardholderName = this.model.cardName
      this.loading = true
      this.$ajax.post('/ms-user-wallet/wallet/wallet-banks-add', userDat).then(response => {
        this.loading = false
        const success = dotData(response, 'success')
        if (success) {
          this.active = 3
        }
      })
    }
  }
}
</script>
